<template>
  <el-main class="main">
    <div class="main-body">
      <el-row>
        <el-col :span="24">
          <el-table :data="patients" v-loading="loading" style="width: 100%">
            <!-- <el-table-column type="selection" width="50" style="text-align: center;" /> -->
            <el-table-column
              label="患者身份证号"
              style="text-align: center"
              prop="pid"
            />
            <el-table-column
              label="患者姓名"
              style="text-align: center"
              prop="patientname"
            />
            <el-table-column
              label="患者联系方式"
              style="text-align: center"
              prop="patienttel"
            />
            <el-table-column
              label="待体检项目"
              style="text-align: center"
              prop="physicalexamination"
            />
            <el-table-column label="患者队列状态" style="text-align: center">
              <template #default="scope">
                <el-steps :active="scope.row.examinationflag">
                  <el-step title="待体检" />
                  <el-step title="体检中" />
                  <el-step title="已完成" />
                </el-steps>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              style="text-align: center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="editPatient(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="deletePatientout(scope.row.pid)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination></el-pagination>
        </el-col>
      </el-row>
      <el-pagination
        v-model="currentPage"
        :total="total"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="updatedialogVisible" title="修改病人信息" width="25%" center>
      <el-form v-model="form" @submit.prevent="savePatient" label-width="100">
        <!-- 表单内容 -->
        <el-form-item label="患者身份证号" prop="pid">
          <el-input v-model="form.pid" readonly></el-input>
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientname">
          <el-input v-model="form.patientname"></el-input>
        </el-form-item>
        <el-form-item label="患者联系方式" prop="patienttel">
          <el-input v-model="form.patienttel"></el-input>
        </el-form-item>
        <el-form-item label="待体检项目" prop="physicalexamination">
          <el-input v-model="form.physicalexamination"></el-input>
        </el-form-item>
        <el-form-item label="患者队列状态" prop="examinationflag">
          <el-input v-model="form.examinationflag"></el-input>
        </el-form-item>
        <span class="button-group">
          <el-button type="primary" native-type="submit">保存</el-button>
          <el-button @click="fclose">取消</el-button>
        </span>

      </el-form>
    </el-dialog>
  </el-main>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import axios from "axios";
import { reactive } from "vue";
import router from "../router";
const currentPage = ref(1);
const total = ref(0);
const pageSize = ref(10);
//更换页面
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

watch(currentPage, () => {
  fetchData();
});
//分页
const fetchData = () => {
  axios
    .get(
      `/api/patientoutlist/page1?page=${currentPage.value}&pageSize=${pageSize.value}`
    )
    .then((res) => {
      total.value = res.data.data.total;
      // 处理返回数据
      selectpatientout();
    });
};

fetchData();

const patients = ref([]);
const form = reactive({
  pid: "",
  patientname: "",
  patienttel: "",
  physicalexamination: "",
  examinationflag: "",
});
const updatedialogVisible = ref(false); // 对话框的可见性

const fclose =()=>{
  updatedialogVisible.value = false;
}

const editPatient = (row) => {
  updatedialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
  console.log("修改患者信息", row);
  form.pid = row.pid;
  form.patientname = row.patientname;
  form.patienttel = row.patienttel;
  form.examinationflag = row.examinationflag;
  form.physicalexamination = row.physicalexamination;
  console.log(updatedialogVisible.value);
};

//查找患者
const selectpatientout = () => {
  axios
    .get(
      `/api/patientoutlist/page1?page=${currentPage.value}&pageSize=${pageSize.value}`
    )
    .then((res) => {
      patients.value = res.data.data.rows;
      console.log(patients.value);
    });
};

const deletePatientout = (p) => {
  const pid = p;
  console.log(pid);
  axios
    .post(`/api/patientoutlist/delete?pid=${pid}`)
    .then((res) => {
      selectpatientout();
    });
};
const savePatient = (row) => {
  // 处理表单的提交逻辑，将 form 对象中的属性值发送给服务端保存患者信息
  console.log("提交表单", row);
  axios
    .post(`/api/patientoutlist/update`, form)
    .then((response) => {
      // 保存成功的处理逻辑
      console.log("保存成功", response.data);
      // 关闭弹窗
      updatedialogVisible.value = false;
      form.pid = "";
      form.patientname = "";
      form.patienttel = "";
      form.physicalexamination = "";
      form.examinationflag = "";
      selectpatientout();
    });
};
</script>
  
<style lang="scss" scoped>
.main {
  height: 100%;
  background-color: rgb(250, 252, 253);

  .main-body {
    // margin-top: 14px;
    border-radius: 10px;
    height: calc(86vh - 100px);
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
}
.button-group {
  display: flex;
  justify-content: center;
}
</style>
  